<template>
  <div class="view-container">
    <div class="filter-wrapper info-filter-wrapper">
      <el-form :inline="true" :model="filterItem" :rules="rules" ref="infoForm">
        <!--<el-form-item label="按">
          <el-select v-model="filterItem.type" placeholder="请选择">
            <el-option label="订单编号" value="orderId"></el-option>
            <el-option label="用户ID" value="userId"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="查询" prop="value">
          <el-input v-model="filterItem.value" placeholder="请输入订单编号" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native.prevent="search('infoForm')">查询订单</el-button>
          <export-file :api-info="downloadApi" style="margin-left: 20px;">导出全部订单</export-file>
        </el-form-item>
      </el-form>
    </div>

    <div class="result-wrapper" v-loading="searching" element-loading-text="查询中" :class="{'searching':searching}">

      <empty v-if="!hint" :inline="false" style="margin-top: 40px;">暂无订单信息</empty>

      <template v-if="hint">

        <div class="el-table el-table--border el-table--fit info-table">
          <table>
            <!--订单基本信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">订单基本信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">订单编号</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{orderNumber}}</div>
                </td>
                <td>
                  <div class="cell">订单状态</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.stateStr}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">预约时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.createTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">信审时间</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.creditCheckTime | parseTime}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">首付时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.firstPayTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">租赁结束时间</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.leaseExpireTime | parseTime}} </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">订单电子协议</div>
                </td>
                <td colspan="4">
                  <div class="cell"><el-button type="text" @click.stop.prevent="agreement(basicInfo.id, basicInfo.ismtAgmtUrl)">点击查看</el-button></div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--订单商品信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">订单商品信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">商品名称</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{goodsInfo.goodsName}}</div>
                </td>
                <td>
                  <div class="cell">商品编号</div>
                </td>
                <td>
                  <div class="cell">{{goodsInfo.goodsNo}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">商品分类</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{goodsInfo.category}}</div>
                </td>
                <td>
                  <div class="cell">品牌型号</div>
                </td>
                <td>
                  <div class="cell">{{goodsInfo.brand}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">商品规格</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{goodsInfo.standard}}</div>
                </td>
                <td>
                  <div class="cell">商品价格(元)</div>
                </td>
                <td>
                  <div class="cell">￥{{goodsInfo.price | parsePrice}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">商品专属码</div>
                </td>
                <td colspan="4">
                  <div class="cell">{{goodsInfo.goodsSn}}</div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--订单金额信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">订单金额信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">订单租期</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.leaseTerm || '-'}}天</div>
                </td>
                <td>
                  <div class="cell">分期期数</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.payNum}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">首付租金</div>
                </td>
                <td colspan="2">
                  <div class="cell">￥{{basicInfo.firstRent | parsePrice}}</div>
                </td>
                <td>
                  <div class="cell">全部租金</div>
                </td>
                <td>
                  <div class="cell">￥{{basicInfo.cost | parsePrice}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">支付租金方式</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.rentPayMethod}}</div>
                </td>
                <td>
                  <div class="cell">冻结金额</div>
                </td>
                <td>
                  <div class="cell">￥{{basicInfo.cashPledge | parsePrice}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">违约缓冲天数</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.bufferDays || 0}}天</div>
                </td>
                <td>
                  <div class="cell">违约金系数</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.liquidatedDamagesPercent || '-'}}‰</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">所用优惠券</div>
                </td>
                <td colspan="2">
                  <div class="cell">
                    <template v-if="!basicInfo.boundsList || basicInfo.boundsList.length <=0 ">
                      <div>未使用优惠券</div>
                    </template>
                    <template v-if="basicInfo.boundsList && basicInfo.boundsList.length > 0">
                      <table class="el-table">
                        <thead>
                        <tr>
                          <td>
                            <div class="cell">优惠券编号</div>
                          </td>
                          <td>
                            <div class="cell">金额</div>
                          </td>
                          <td>
                            <div class="cell">优惠券名称</div>
                          </td>
                        </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item,index) in basicInfo.boundsList" :key="index">
                            <td>
                              <div class="cell">{{item.boundsExampleNumber}}</div>
                            </td>
                            <td>
                              <div class="cell">{{item.voucherDiscount | parsePrice}}</div>
                            </td>
                            <td>
                              <div class="cell">{{item.boundsExampleName}}</div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </template>
                  </div>
                </td>
                <td>
                  <div class="cell">意外保险</div>
                </td>
                <td>
                  <div class="cell">￥{{basicInfo.accidentInsurance | parsePrice}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">订单金额</div>
                </td>
                <td colspan="2">
                  <div class="cell">
                    <table class="el-table">
                      <thead>
                      <tr>
                        <td>
                          <div class="cell">首付租金</div>
                        </td>
                        <td>
                          <div class="cell">￥{{basicInfo.firstRent | parsePrice}}</div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="cell">优惠券</div>
                        </td>
                        <td>
                          <div class="cell">￥{{basicInfo.voucherDiscount | parsePrice | showRevent }}</div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="cell">冻结金额</div>
                        </td>
                        <td>
                          <div class="cell">￥{{basicInfo.cashPledge | parsePrice}}</div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="cell">意外保险</div>
                        </td>
                        <td>
                          <div class="cell">￥{{basicInfo.accidentInsurance | parsePrice}}</div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="cell">合计</div>
                        </td>
                        <td>
                          <div class="cell">￥{{basicInfo.firstPay | parsePrice}}</div>
                        </td>
                      </tr>
                      </thead>
                    </table>
                  </div>
                </td>
                <td>
                  <div class="cell">付款方式</div>
                </td>
                <td>
                  <div class="cell">
                    <p>支付渠道: {{basicInfo.payType}}</p>
                    <p>交易流水号: {{basicInfo.orderNumber}}</p>
                    <p>支付平台流水号: {{basicInfo.payTransactionNo}}</p>
                  </div>
                </td>

              </tr>
              </tbody>
            </template>

            <!--用户账单信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">用户账单信息</div>
              </th>
              </thead>
              <tbody>
              <template v-if="billInfo.length > 0">
                <tr>
                  <td>
                    <div class="cell">租期</div>
                  </td>
                  <td>
                    <div class="cell">租金</div>
                  </td>
                  <td>
                    <div class="cell">逾期违约金</div>
                  </td>
                  <td>
                    <div class="cell">状态</div>
                  </td>
                  <td>
                    <div class="cell">账单到期时间</div>
                  </td>
                </tr>
                <tr v-for="(item, index) in billInfo" :key="index">
                  <td>
                    <div class="cell">{{item.billStage}}</div>
                  </td>
                  <td>
                    <div class="cell">￥{{item.rent | parsePrice}}</div>
                  </td>
                  <td>
                    <div class="cell">￥{{item.delayAmount | parsePrice}}</div>
                  </td>
                  <td>
                    <div class="cell">{{item.stateStr}}</div>
                  </td>
                  <td>
                    <div class="cell">{{item.billEndTime | parseTime}}</div>
                  </td>
                </tr>
              </template>
              <template v-if="billInfo.length <= 0">
                <tr>
                  <td colspan="5">无账单信息</td>
                </tr>
              </template>
              </tbody>
            </template>

            <!--订单用户信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">订单用户信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">下单用户</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.userName}}</div>
                </td>
                <td>
                  <div class="cell">芝麻信用分</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.zmxyScore}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">身份证号</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.cardId}}</div>
                </td>
                <td>
                  <div class="cell">身份证姓名</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.cardName}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">工作单位</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.company}}</div>
                </td>
                <td>
                  <div class="cell">居住地址</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.liveAddress}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">收货人</div>
                </td>
                <td colspan="2">
                  <div class="cell">
                    <span>{{basicInfo.contact}}</span>
                    <span v-if="basicInfo.contactPhone"> / {{basicInfo.contactPhone}}</span>
                  </div>
                </td>
                <td>
                  <div class="cell">收货地址</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.receiveAddress}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">物流渠道</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.expressChannel}}</div>
                </td>
                <td>
                  <div class="cell">物流单号</div>
                </td>
                <td>
                  <div class="cell">{{merchantExpress.expressNo}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">物流信息</div>
                </td>
                <td colspan="4">
                  <div class="cell">
                    <ul class="express-list">
                      <li v-for="(item,index) in merchantExpress.expressDetails" :key="index">
                        <span>{{item.ftime}}</span>
                        <span>{{item.status}} {{item.context}}</span>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--退还信息-->
            <template v-if="returnInfo">
              <thead>
              <th colspan="5">
                <div class="cell">退还信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">到期时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{returnInfo.expireTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">退还状态</div>
                </td>
                <td>
                  <div class="cell">{{returnInfo.returnStateStr || returnInfo.returnState}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">退还方式</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{returnInfo.returnMode}}</div>
                </td>
                <td>
                  <div class="cell">寄回时间</div>
                </td>
                <td>
                  <div class="cell">{{returnInfo.returnTime | parseTime}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">收货时间</div>
                </td>
                <td colspan="4">
                  <div class="cell">{{returnInfo.returnReceivedTime | parseTime}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">收货人</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{returnInfo.returnContact}}</div>
                </td>
                <td>
                  <div class="cell">收货地址</div>
                </td>
                <td>
                  <div class="cell">{{returnInfo.returnReceiveAddress}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">物流渠道</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{returnInfo.returnExpressChannel}}</div>
                </td>
                <td>
                  <div class="cell">物流单号</div>
                </td>
                <td>
                  <div class="cell">{{returnInfo.returnExpressNo}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">物流信息</div>
                </td>
                <td colspan="4">
                  <div class="cell">
                    <ul class="express-list">
                      <li v-for="(item,index) in userExpress.expressDetails" :key="index">
                        <span>{{item.ftime}}</span>
                        <span>{{item.status}} {{item.context}}</span>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--逾期退还信息-->
            <template v-if="returnInfo">
              <thead>
              <th colspan="5">
                <div class="cell">逾期退还信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">到期时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{returnInfo.expireTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">逾期状态</div>
                </td>
                <td>
                  <div class="cell">{{returnInfo.overdueStateStr}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">逾期违约金</div>
                </td>
                <td colspan="2">
                  <div class="cell">￥{{returnInfo.delayAmount | parsePrice}}</div>
                </td>
                <td>
                  <div class="cell">付款方式</div>
                </td>
                <td>
                  <div class="cell">
                    <p>支付渠道: {{returnInfo.payType}}</p>
                    <p>交易流水号: {{returnInfo.orderNumber}}</p>
                    <p>支付平台流水号: {{returnInfo.payTransactionNo}}</p>
                  </div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--赔偿信息-->
            <template v-if="compensateInfo">
              <thead>
              <th colspan="5">
                <div class="cell">赔偿信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">申请赔偿时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{compensateInfo.compensateApplyTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">用户赔偿时间</div>
                </td>
                <td>
                  <div class="cell">{{compensateInfo.compensateTime | parseTime}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">赔偿项</div>
                </td>
                <td colspan="4">
                  <div class="cell">
                    <table class="el-table">
                      <thead>
                      <tr v-for="(item,index) in compensateInfo.compensateItems" :key="index">
                        <td>
                          <div class="cell">{{item.describe}}</div>
                        </td>
                        <td>
                          <div class="cell">￥{{item.money | parsePrice}}</div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="cell">合计</div>
                        </td>
                        <td>
                          <div class="cell">￥{{compensateInfo.compensateAmount | parsePrice}}</div>
                        </td>
                      </tr>
                      </thead>
                    </table>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">赔偿进度</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{compensateInfo.compensateStateStr}}</div>
                </td>
                <td>
                  <div class="cell">管理中心处理结果</div>
                </td>
                <td>
                  <div class="cell">{{compensateInfo.compensateCheckStateStr}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">拒绝赔偿原因</div>
                </td>
                <td colspan="4">
                  <div class="cell">{{compensateInfo.compensateReason}}</div>
                </td>
              </tr>

              </tbody>
            </template>

            <!--售后信息-->
            <template v-if="serviceInfoList.length > 0">
              <thead>
              <th colspan="5">
                <div class="cell">售后信息</div>
              </th>
              </thead>
              <tbody v-for="(service, index) in serviceInfoList" :key="index">
              <tr>
                <td>
                  <div class="cell">售后类型</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{service.category}}</div>
                </td>
                <td>
                  <div class="cell">售后状态</div>
                </td>
                <td>
                  <div class="cell">{{service.state || '-'}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">申请时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{service.applyTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">售后单编号</div>
                </td>
                <td>
                  <div class="cell">{{service.serviceOrderNumber}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">售后进程</div>
                </td>
                <td colspan="4">
                  <div class="cell">
                    <ul class="express-list">
                      <li v-for="(item,index) in service.progress" :key="index">
                        <span>{{item.applyTime | parseTime}}</span>
                        <span>{{item.process}}</span>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              </tbody>
            </template>

            <!--退押金信息-->
            <!--<template v-if="refundInfo">
              <thead>
              <th colspan="5">
                <div class="cell">退押金信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">申请退押时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{refundInfo.applyReturnTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">退押状态</div>
                </td>
                <td>
                  <div class="cell">{{refundInfo.stateStr}}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">退押时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{refundInfo.returnTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">退押信息</div>
                </td>
                <td>
                  <div class="cell">{{refundInfo.returnType}}</div>
                </td>
              </tr>
              </tbody>
            </template>-->

            <!--买断信息-->
            <!--<template v-if="buyoutInfo">
              <thead>
              <th colspan="5">
                <div class="cell">买断信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">申请买断时间</div>
                </td>
                <td colspan="2">
                  <div class="cell"></div>
                </td>
                <td>
                  <div class="cell">买断进度</div>
                </td>
                <td>
                  <div class="cell"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">管理中心处理结果</div>
                </td>
                <td colspan="2">
                  <div class="cell"></div>
                </td>
                <td>
                  <div class="cell">拒绝买断原因</div>
                </td>
                <td>
                  <div class="cell">-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell">用户买断时间</div>
                </td>
                <td colspan="2">
                  <div class="cell"></div>
                </td>
                <td>
                  <div class="cell"></div>
                </td>
                <td>
                  <div class="cell"></div>
                </td>
              </tr>
              </tbody>
            </template>-->

            <!--取消信息-->
            <template>
              <thead>
              <th colspan="5">
                <div class="cell">取消信息</div>
              </th>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="cell">取消时间</div>
                </td>
                <td colspan="2">
                  <div class="cell">{{basicInfo.canceledTime | parseTime}}</div>
                </td>
                <td>
                  <div class="cell">取消原因</div>
                </td>
                <td>
                  <div class="cell">{{basicInfo.cancelReason || '-'}}</div>
                </td>
              </tr>
              </tbody>
            </template>

          </table>
        </div>

      </template>

    </div>

    <!--电子协议-->
    <el-dialog
        title=""
        :visible.sync="dialogAgmt"
        size="large"
        >
      <div style="line-height: 1.5;">
        <div v-if="basicInfo.ismtAgmtUrl.indexOf('merchant.mibaostore.') != -1" v-html="agmtContent"></div>
        <iframe v-if="basicInfo.ismtAgmtUrl.indexOf('merchant.mibaostore.') == -1 " :src="basicInfo.ismtAgmtUrl" style="min-height: 600px; max-height:800px; width: 100%;border:none;overflow: auto;"></iframe>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Empty from '@/components/Empty';
  import {getOrderInfoBasic,
    getOrderInfoGoods,
    getOrderInfoBill,
    getOrderInfoReturn,
    getOrderInfoRefund,
    getOrderInfoCompensate,
    getOrderInfoBuyout,
    getOrderInfoExpress,
    getOrderInfoAgmt,
    downloadOrders,
  } from '@/api/order';

  import ExportFile from '@/components/ExportFile';

  export default {
    name: 'orderInfo',
    components: {
      'empty': Empty,
      'export-file':ExportFile,
    },
    data ()
    {
      const validateValue = (rule, value, callback) =>
      {
        if (value.length <= 0)
        {
          callback(new Error('请输入订单号'));
        } else
        {
          callback();
        }
      };
      return {
        filterItem: {
          type: 'orderId',
          value: '',
        },
        rules: {
          value: [
            {trigger: 'blur', validator: validateValue}
          ],
        },
        searching: false, //查询中
        hint:false, //搜索命中

        dialogAgmt:false, //电子协议
        agmtContent:'', //电子协议内容，html

        orderNumber:'', //订单编号
        //基本信息，金额信息
        basicInfo:{
          id:'', //订单号
          state:'', //订单状态
          stateStr:'', //状态描述
          createTime:0, //创建时间
          checkTime:0, //审核时间
          firstPayTime:0, //首付时间
          firstPay: 0,//实际第一次支付费用 （单位：分）
          firstRent:0,//首付租金(单位：分)
          leaseExpireTime:0, //租赁结束时间
          leaseTerm:0, //租赁期限
          creditCheckTime:0, //订单信审时间
          ismtAgmtUrl:'',//电子协议
          payType:'', //支付方式
          paymentNo: '', //系统支付订单号
          orderNumber:'', //交易流水号
          payTransactionNo:0, //支付平台流水号（交易单号）

          goodsName:'',//商品名称
          goodsNo:'', //商品编号
          goodsSn:'', //商品SN码
          standard:'', //商品规格
          price:0, //商品价格(单位：分)

          accidentInsurance:0, //保险
          payNum:0, //分期期数
          remPayNum:0, //剩余还款期数
          bufferDays:0, //违约缓冲天数
          liquidatedDamagesPercent:0, //违约金系数
          addedService:'',//增值服务
          cashPledge:0, //押金(单位：分)
          cost:0, //全部租金(单位：分)
          userName:'', //下单用户
          zmxyScore:0, //芝麻信用分
          cardId:'', //身份证号
          cardName:'',//身份证姓名
          company:'', //工作单位
          liveAddress:'', //居住地址
          contact:'', //收货人
          contactPhone:'', //收货手机
          receiveAddress:'',//收货地址
          expressNo:'',//物流单号
          logisticsCompany:'', //快递公司
          rentPayMethod:'',//支付租金方式
          cancelReason:'', //订单取消原因
          canceledTime:0, //取消时间
          voucherDiscount:0, //红包抵用金额
          boundsList: [
            {
              boundsExampleNumber: '', //红包编号
              boundsExampleName: '', //红包名字
              voucherDiscount: 0, //红包抵用金额
            },
          ]
        },
        //商品信息
        goodsInfo:{
          goodsName:'', //商品名称
          goodsNo:'', //商品编号
          standard:'',//商品规格
          price:0, //商品价格(单位：分)
          brand:'', //品牌类型
          category:'', //商品分类
          goodsSn:'', //商品SN码
        },
        //账期信息
        billInfo:[
          {
            billStage:'', //租期
            rent:0, //租金
            delayAmount:0, //逾期违约金
            stateStr:'', //状态描述
            billEndTime:0, //账单到期时间
          },
        ],
        // 退还信息
        returnInfo:{
          returnMode: '', //退还方式(快递|上门)
          returnState: '', //退还状态
          returnStateStr: '', //退还状态描述
          returnTime: 0, //退还寄回时间
          returnReceivedTime: 0, //退还收货时间
          returnExpressChannel: '', //退还物流渠道
          returnExpressNo: '', //退还物流单号
          returnContact: '', //退还收货人
          returnReceiveAddress: '', //退还收货地址

          //逾期退还信息
          expireTime: 0, //到期时间
          overdueStateStr:'', //逾期状态
          delayAmount:0, //逾期违约金
          payType:'', //付款方式
          payTransactionNo:'',//交易号
          orderNumber:'',//流水号

        },
        //退押金信息
        refundInfo:[
          {
            applyReturnTime: 0, //申请退押时间
            returnTime: 0, //退还时间
            returnType: '', //退还类型
            state: '', //退还状态
            stateStr: '', //退还状态描述
          },
        ],
        //赔偿信息
        compensateInfo:{
          compensateTransactionNo: '', //支付平台流水号（交易单号）
          compensatePaymentNo: '', //流水号（系统支付订单号)
          compensatePayType: '', //支付方式（微信/支付宝）
          compensateTime: 0, //用户赔偿时间
          compensateReason: '', //赔偿审核通过或拒绝原因
          compensateApplyTime: 0, //申请赔偿时间
          compensateCheckTime: 0, //赔偿管理中心处理时间
          compensateCheckStateStr: '', //赔偿管理中心处理结果（同意、拒绝
          compensateStateStr: '', //赔偿状态描述
          compensateState: '', //赔偿状态（等待中心审核／等待用户赔偿／赔偿成功）
          compensateItems:[/*{money:0,describe:''}*/], //赔偿项详情
          compensateAmount:0, //赔偿总额
        },
        //售后信息
        serviceInfoList:[{
          category: '', //售后类型
          state: '', //售后状态
          applyTime: 0, //申请时间
          serviceOrderNumber: '', //售后单编号
          progress: { //进程
            process: '',
            applyTime: 0
          }
        }],
        //买断信息
        buyoutInfo:null,
        //发货物流信息
        merchantExpress:{ //物流信息
          expressNo:'', //快递号
          goodsName:'', //商品名称
          img:'',//商品图片
          logisticsCompany:'', //快递渠道
          expressDetails:[
            /*{
              time:'', //物流更新时间
              ftime:'', //格式化后的物流时间
              status:'', //物流状态
              context:'', //物流描述
            },*/
          ],
        },
        //退回物流信息
        userExpress:{ //物流信息
          expressNo:'', //快递号
          goodsName:'', //商品名称
          img:'',//商品图片
          logisticsCompany:'', //快递渠道
          expressDetails:[
            /*{
              time:'', //物流更新时间
              ftime:'', //格式化后的物流时间
              status:'', //物流状态
              context:'', //物流描述
            },*/
            /*{
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            }*/

          ],
        },

        downloadApi:{
          url:'order/download',
          method:'get',
          data:{},
        },
      }
    },
    computed:
    {
      boundsCost() //合计优惠金额
      {
        let cost = 0;
        let bounds = this.basicInfo.boundsList || [];
        bounds.forEach(b=>{
          cost += b.voucherDiscount || 0;
        });

        return cost;
      }
    },
    mounted()
    {
       let id = this.$route.query.id || '';
       this.filterItem.value = id;
       if(id)
       {
         this.search('infoForm');
       }
    },
    methods: {
      search(formName)
      {
        this.$refs[formName].validate(valid =>
        {
          if (valid && !this.searching)
          {
            let data = {
              id:this.filterItem.value,
              orderNumber:this.filterItem.value,
            };

            this.searching = true;

            Promise.all([
              getOrderInfoBasic(data),
              getOrderInfoGoods(data),
              getOrderInfoBill(data),
              getOrderInfoReturn(data),
              getOrderInfoCompensate(data),
              //getOrderInfoRefund(data),
              //getOrderInfoBuyout(data),

            ]).then(resp=>{

                let basicInfo =  resp[0].data || {};

                this.basicInfo = basicInfo;
                this.goodsInfo = resp[1].data || {};
                this.billInfo = resp[2].data || [];
                this.returnInfo = resp[3].data || null;

                //赔偿信息
                this.compensateInfo = resp[4].data || null;

                this.orderNumber = this.filterItem.value;

                //售后信息
                this.serviceInfoList = basicInfo.serviceOrderList || [];

                //退押金
                //this.refundInfo = resp[5].data || null;

                //缺买断信息接口
                //this.buyoutInfo = resp[8].data || null;

              let id = this.basicInfo.id;
              //物流信息
              Promise.all([
                getOrderInfoExpress({id:id,type:'user'}),
                getOrderInfoExpress({id:id,type:'merchant'})
              ]).then(resp=>{

                this.merchantExpress = resp[0].data || {};
                this.userExpress = resp[1].data || {};
              }).catch(err=>{

              });

                this.hint = true;
                setTimeout(()=>{
                  this.searching = false;
                },300);
              }).catch(err=>{
                console.log(err);
                this.hint = false;
                setTimeout(()=>{
                  this.searching = false;
                },300);
            });

          } else
          {
            return false;
          }
        });
      },
      agreement(id, url) //电子协议
      {
        if(id && url.indexOf('merchant.mibaostore.')!== -1)
        {
          let data = {
            id:id,

          };
          getOrderInfoAgmt(data).then(resp=>{
            this.agmtContent = resp.data;
            this.dialogAgmt = true;

          }).catch(err=>{

            this.dialogAgmt = false;
          });
        }
        else
        {
          this.dialogAgmt = true;
        }

      },
    },
    filters:{
      showRevent(value)
      {
        return value? -value : value
      }
    },
  }
</script>

<style lang="scss" scoped>
  .result-wrapper
  {
     &.searching
     {
        height: 200px;
        height: 50vh;
        overflow: hidden;
     }

    .express-list
    {
      list-style: none;
      padding: 0;
      margin: 0;

      li
      {

      }
    }
  }

  .info-table {
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;

      thead
      {
         th
         {
            text-align: center;
         }
      }

      table
      {
         margin: 18px 0;
      }
    }
  }
</style>
